<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐播放器</title>
<style>
body{
    background-color: aqua;
}
#music {
	width: 500px;
	height: 500px;
	border-radius: 10px;
	margin: 20px auto;
	position: relative;
    background-color: aqua;
	background: url('./images/bg.jpg') no-repeat border-box;
	background-size: cover;
	text-align: center;
}
#container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 500px;
	height: 500px;
	text-align: center;
	background:rgba(255,255,255,0.6);
}
#musicImg{
	width: 300px;
	height: 300px;
	text-align: center;
	margin: auto;
	border-radius:50%;
	}
</style>
</head>
 
<body>
<div id="music">
	<div id="container">
		<h3 id="musicName">音乐播放器</h3>
		<img src="./images/1.jpg" id="musicImg">
		<audio src="./mp3/1.mp3" controls id="audio">low browsers not support</audio>
		<div class="btn">
			<button id="play">开始</button>
			<button id="pause">暂停</button>
			<button id="prev">上一首</button>
			<button id="next">下一首</button>
		</div>
	</div>
</div>
<script>
// 播放
play.onclick = function(){
	if(audio.paused){
		audio.play();
	}
}
 
// 暂停
pause.onclick = function(){
	if(audio.played){
		audio.pause();
	}
}
var num=1;
var len=3
var bgImage = document.getElementById("musicImg");
prev.onclick = function(){
	if(num>1){
		num = num - 1;
		}
	else{
		num=3;
		}
	
	audio.src = './mp3/' + num + '.mp3';
 
	bgImage.style.backgroundImage = 'url(./images/' + num + '.jpg)';
	musicImg.src = './images/' + num + '.jpg';
	audio.play();
}
 
// 下一首
next.onclick = function(){
	if(num<3){
		num = num + 1;
		}
	else{
		num=1;
		}
	audio.src = './mp3/' + num + '.mp3';
	
	bgImage.style.backgroundImage = 'url(./image/' + num + '.jpg)';
	musicImg.src = './images/' + num+ '.jpg';
	audio.play();
 
}
 
audio.addEventListener('ended',function(){
	next.onclick();
},false);
// 上一首
 
 
</script>
</body>
</html>